import Contents from "../../components/contents/Contents";
import { useMemo, useEffect, useState, useRef } from "react";

import { getAllType, addType, delType, editType } from "../../api/roomType";
import {
  Space,
  Table,
  Tag,
  Button,
  Drawer,
  Form,
  Input,
  InputNumber,
  message,
  Popconfirm,
} from "antd";

const Room = () => {
  // const confirmDel = async (values) => {
  //   console.log(values);

  //   //  let res = await delType({ typeid: id });
  //   //  const { success } = res;
  //   //  if (!success) return MessagePlugin.warning("删除失败");
  //   //  MessagePlugin.success("删除成功");
  //   //  getData();
  // };

  const handlerDel = async (id) => {
    let res = await delType({ typeid: id });
    const { success } = res;
    if (!success) return message.warning("删除失败");
    message.success("删除成功");
    getData();
  };
  // const handlerDel = async (record) => {
  //   await console.log(record);
  //   message.success("删除成功");
  // };

  const cancel = (e) => {
    console.log(e);
    message.error("无事发生");
  };

  const columns = [
    {
      title: "房型名称",
      dataIndex: "name",
      name: "name",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "床的数量",
      dataIndex: "beds",
      name: "beds",
    },
    {
      title: "价格",
      dataIndex: "price",
      name: "price",
    },
    {
      title: "押金",
      name: "yaPrice",
      dataIndex: "yaPrice",
    },
    {
      title: "简称",
      name: "shortName",
      dataIndex: "shortName",
    },
    {
      title: "入住人数",
      name: "liveLimit",
      dataIndex: "liveLimit",
    },
    {
      title: "早餐券数量",
      name: "couponNum",
      dataIndex: "couponNum",
    },
    {
      title: "操作",
      name: "action",
      render: (record) => (
        <div>
          <Button
            style={{ marginRight: "10px" }}
            onClick={() => {
              return setShowEdit(true), edithandle(record);
            }}
          >
            修改
          </Button>
          <Popconfirm
            title="你确定是删除该房型吗?"
            onConfirm={() => handlerDel(record._id)}
            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <Button>删除</Button>
          </Popconfirm>
        </div>
      ),
    },
  ];

  const [data, setData] = useState([]);
  const [limit, setLimit] = useState(30); // 单页数量
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0); // 总数

  // 获取表格数据的主函数
  const getData = async () => {
    const postData = { limit, page };
    if (name) postData.name = name;
    if (price) postData.price = price;

    let res = await getAllType(postData);
    const { success, data, count } = res;
    if (success) {
      setData(data);
      setTotal(count);
    }
  };

  // 条件过滤
  const [name, setName] = useState("");
  const [price, setPrice] = useState("");

  useEffect(() => {
    getData();
  }, []);


  // 添加逻辑
  const [showAdd, setshowAdd] = useState(false);

  const [form1] = Form.useForm();
  const [form2] = Form.useForm();

  const onFinish = async (values) => {
    console.log(values);
    let res = await addType(values);
    const { success } = res;
    if (!success) return message.warning("添加失败");
    message.success("添加成功");
    getData(); // 刷新表格

    setshowAdd(false); // 抽屉隐藏
    form1.resetFields();
  };

  const onFinishFailed = (e) => {
    console.log(e);
  };

  const [curRow, setcurRow] = useState(null);
  const edithandle = async (record) => {
    form2.setFieldsValue(record);
    setcurRow(record);
  };



  // 修改操作
  const editFinish = async (value) => {
    console.log(value);
    let res = await editType({
      ...value,
      typeid: curRow._id,
    });
    const { success } = res;
    if (!success) return message.warning("修改失败");
    message.success("修改成功");
    getData(); // 刷新表格
    setShowEdit(false); // 抽屉隐藏
  };


  

  const editFinishFailed = () => {
    setShowEdit(false);
  };

  const [showEdit, setShowEdit] = useState(false);

  const nameval = (e) => {
    let val = e.target.value;
    setName(val);
  };
  const prival = (e) => {
    let val = e.target.value;
    setPrice(val);
  };

  const [pa, setpa] = useState({
    showSizeChanger: "true",
    total: total,
    pageSizeOptions: [5, 10, 20],
    defaultPageSize: 5,
    showTotal: (total) => `一共有${total}条数据`,
  });

  const Protable = () => (
    <Table
      columns={columns}
      dataSource={data}
      rowKey="_id"
      pagination={pa}
      onChange={setpa}
    />
  );

  return (
    <Contents title="房型维护">
      <div>
        <Button
          type="primary"
          style={{ margin: ".9375rem" }}
          onClick={() => setshowAdd(true)}
        >
          添加新的房型
        </Button>

        <Input
          style={{ width: "150px", marginLeft: "250px" }}
          placeholder="输入你有查询的房型"
          onChange={(e) => setName(e.target.value)}
        />
        <Input
          style={{ width: "150px", marginLeft: "20px" }}
          placeholder="按价格查询"
          onChange={(e) => setPrice(e.target.value)}
        />
        <Button
          type="primary"
          style={{ margin: ".9375rem", float: "right" }}
          onClick={getData}
        >
          立即查询
        </Button>
      </div>

      <Protable></Protable>

      {/* 添加房型业务 */}
      <Drawer
        visible={showAdd}
        width="31.25rem"
        onClose={() => setshowAdd(false)}
      >
        <Form
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 14,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          form={form1}
        >
          <Form.Item
            label="房型名称"
            name="name"
            required={true}
            rules={[
              {
                required: true,
                message: "请填写房名!",
              },
            ]}
          >
            <Input placeholder="填写房间名称" />
          </Form.Item>
          <Form.Item label="房型简称" name="shortName">
            <Input placeholder="填写房间简称" />
          </Form.Item>
          <Form.Item
            label="价格"
            name="price"
            required={true}
            rules={[
              {
                required: true,
                message: "没钱开什么房!",
              },
            ]}
          >
            <Input placeholder="填写价格" />
          </Form.Item>
          <Form.Item label="押金" name="yaPrice">
            <Input placeholder="填写押金" />
          </Form.Item>
          <Form.Item label="早餐券数量" name="couponNum" initialValue={0}>
            <InputNumber  min={0} />
          </Form.Item>
          <Form.Item label="入住人数" name="liveLimit" initialValue={1}>
            <InputNumber  min={1} />
          </Form.Item>
          <Form.Item label="床数量" name="beds" initialValue={1}>
            <InputNumber min={1} />
          </Form.Item>
          <Button
            htmlType="submit"
            type="primary"
            style={{ margin: ".625rem" }}
            // onClick={}
          >
            确认提交
          </Button>
          <Button type="primary" onClick={() => setshowAdd(false)}>
            取消
          </Button>
        </Form>
      </Drawer>

      {/* 修改房型 */}
      <Drawer
        visible={showEdit}
        width="31.25rem"
        onClose={() => setShowEdit(false)}
      >
        <Form
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 14,
          }}
          onFinish={editFinish}
          onFinishFailed={editFinishFailed}
          form={form2}
        >
          <Form.Item
            label="房型名称"
            name="name"
            required={true}
            rules={[
              {
                required: true,
                message: "请填写房名!",
              },
            ]}
          >
            <Input placeholder="填写房间名称" />
          </Form.Item>
          <Form.Item label="房型简称" name="shortName">
            <Input placeholder="填写房间简称" />
          </Form.Item>
          <Form.Item
            label="价格"
            name="price"
            required={true}
            rules={[
              {
                required: true,
                message: "没钱开什么房!",
              },
            ]}
          >
            <Input placeholder="填写价格" />
          </Form.Item>
          <Form.Item label="押金" name="yaPrice">
            <Input placeholder="填写押金" />
          </Form.Item>
          <Form.Item initialValue={0} label="早餐券数量" name="couponNum">
            <InputNumber min={0} />
          </Form.Item>
          <Form.Item initialValue={1} label="入住人数" name="liveLimit">
            <InputNumber min={1} />
          </Form.Item>
          <Form.Item initialValue={1} label="床数量" name="beds">
            <InputNumber min={1} />
          </Form.Item>
          <Button
            htmlType="submit"
            type="primary"
            style={{ margin: ".625rem" }}
            // onClick={}
          >
            确认提交
          </Button>
          <Button type="primary" onClick={() => setShowEdit(false)}>
            取消
          </Button>
        </Form>
      </Drawer>
    </Contents>
  );
};
export default Room;
